<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'addbook.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
    <link rel="stylesheet" href="layui/css/layui.css">
  </head>
  <style>
  .div2{width:380px;height:360px;background-color:#393D49;float:right;margin-top:100px;margin-right:100px;}
  .div3{font-size:20px;color:#F0F0F0;float:left;}
  .div4{font-size:15px;color:#F0F0F0;}
  .div5{float:left;}
  body{
  background-repeat : no-repeat;
	background-size:100%;
  }
  </style>
  <body background="./image/login_bg.jpg">
		
		<form class="layui-form" action="login.action">
		<div class="layui-card div2">
		<div class="layui-card-header"><div class="div3">用户登录</div>
    		  </div>
		      <div class="layui-card-body ">
		         <form class="layui-form" >
				   <div class="layui-form-item">
						    <label class="layui-form-label div4">用户名</label>
						    <div class="layui-input-block">
						      <input style="width:200px"  type="text" id="userid" name="userid" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
						    </div>
				   </div>
				   
				   <div class="layui-form-item">
					    <label class="layui-form-label div4">密码框</label>
					    <div class="layui-input-inline">
					      <input style="width:200px" type="password" id="pwd" name="pwd" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
					    </div>
				   </div>
				   
				   <div class="layui-form-item">
						    <label class="layui-form-label div4">验证码</label>
						    <div class="layui-input-block">
							    <div class="div5">
							    	<input style="width:100px" type="password" name="password"  autocomplete="off" class="layui-input">
							    </div>
							    
							    <div>
							        <img alt="" src="image/yanzhengma.jpg" width="100px" height="38px">
							    </div>
						    </div>
				   </div>
				   
				   <div class="layui-form-item">
						    <div class="layui-input-block">
						      <button style="width:120px" class="layui-btn" >确认登录</button>
						      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
						    </div>
				   </div>
				   
				    <div class="layui-form-item">
				    <label class="layui-form-label div4">登录类型</label>
					    <div class="layui-input-block div4">
					      <input type="radio" name="sex" value="管理员" title="管理员">
					      <input type="radio" name="sex" value="普通用户" title="普通用户" checked>
					    </div>
				    </div>
		         </form>
			  </div>
		  </div>
		</form>
		<script src="layui/layui.js" charset="utf-8"></script>
		  <script>
				//Demo
			layui.use('form', function(){
			  var form = layui.form;
			  
			  //监听提交
			  form.on('submit(formDemo)', function(data){
			    layer.msg(JSON.stringify(data.field));
			    return false;
			  });
			});
		  </script> 
	</body>
</html>
